/**
 * @description 滤波器
 */

import { useMemoizedFn } from 'ahooks';
import { Form, InputNumber, Select, Slider } from 'antd';
import { memo, useEffect, useState } from 'react';

import { FilterOptionsWithId } from 'common/utils/eq-filter/types';
import { useGetFilterType } from './hook';
import NP from 'number-precision';

function SliderItem({
  value,
  onChange,
  sliderProps,
  readOnly,
}: {
  value: number;
  onChange: (value: number) => void;
  sliderProps: {
    min: number;
    max: number;
    step: number;
    precision: number;
  };
  readOnly?: boolean
}) {
  return (
    <div className='flex items-center gap-[8px]'>
      {readOnly ? NP.round(value, sliderProps?.precision ?? 0) : <>
        <div className='flex-1 min-w-0'>
          <Slider
            {...sliderProps}
            value={value}
            onChange={onChange}
            disabled={readOnly}
          />
        </div>
        <InputNumber
          readOnly={readOnly}
          min={sliderProps?.min}
          max={sliderProps?.max}
          step={sliderProps?.step as number}
          className='w-[80px]'
          precision={sliderProps?.precision}
          size='small'
          value={value}
          onChange={(val) => {
            if (val === null) {
              onChange(sliderProps?.min ?? 0);
            } else {
              onChange(val);
            }
          }}
        />
      </>}

    </div>
  )
}

interface FilterProps {
  value: FilterOptionsWithId;
  onChange: (value: FilterOptionsWithId) => void;
  readOnly?: boolean
}

function Filter(props: FilterProps) {
  const { value, onChange, readOnly } = props;

  const [filterValue, setFilterValue] = useState<FilterOptionsWithId>(value);
  const { typeList, rangeConfig } = useGetFilterType();

  const onValuesChange = useMemoizedFn(
    (key: keyof FilterOptionsWithId, val: unknown) => {
      const newFilterValue = { ...filterValue, [key]: val };
      setFilterValue(newFilterValue);
      onChange(newFilterValue);
    },
  );

  useEffect(() => {
    setFilterValue(value);
  }, [value]);

  return (
    <div>
      <Form labelCol={{ style: { width: 80 } }} colon={false}>

        <Form.Item label="当前频率" colon={false} className='mb-3'>
          <SliderItem
            readOnly={readOnly}
            value={filterValue.frequency}
            onChange={(val) => {
              onValuesChange('frequency', val);
            }}
            sliderProps={rangeConfig.frequency}
          />
        </Form.Item>

        <Form.Item label="滤波器类型" colon={false} className='mb-3'>
          {readOnly ? filterValue.filterType : <Select
            disabled={readOnly}
            value={filterValue.filterType}
            onChange={(val) => {
              onValuesChange('filterType', val);
            }}
          >
            {typeList.map((item) => {
              return (
                <Select.Option key={item.value} value={item.value}>
                  {item.label}
                </Select.Option>
              );
            })}
          </Select>}
        </Form.Item>

        <Form.Item label="Gain" colon={false} className='mb-3'>
          <SliderItem
            readOnly={readOnly}
            value={filterValue.gain}
            onChange={(val) => {
              onValuesChange('gain', val);
            }}
            sliderProps={rangeConfig.gain}
          />
        </Form.Item>

        <Form.Item label="Q Factor" colon={false} className='mb-3'>
          <SliderItem
            readOnly={readOnly}
            value={filterValue.q}
            onChange={(val) => {
              onValuesChange('q', val);
            }}
            sliderProps={rangeConfig.q}
          />
        </Form.Item>
      </Form>
    </div >
  );
}

export default memo(Filter);
